<template>
  <div class="baseinfo">
    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-model-item label="项目编号" prop="projectNo" :label-col="{ span: 8 }" :wrapper-col="{ span: 15 }">
            {{form.projectNo}}
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item
            ref="projectName"
            label="项目名称"
            prop="projectName"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-input
              v-model="form.projectName"
              @blur="
                () => {
                  $refs.projectName.onFieldBlur()
                }
              "
              placeholder="请输入项目名称" 
              :disabled="form.status>1" 
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item
            label="项目分类"
            prop="projectTypeSubCategory"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-select
              v-model="form.projectTypeSubCategory"
              placeholder="请选择项目分类"
              :options="projectCategoryOptions" :disabled="form.id!=''"  
            >
              <a-icon slot="suffixIcon" type="plus" />
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-model-item
            ref="hatchProjectNo"
            label="孵化项目编号"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-input v-model="form.hatchProjectNo" placeholder="点击选择孵化项目" @click="hatch.visible = true" :disabled="form.status>1"  />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item
            ref="hatchProjectName"
            label="孵化项目名称"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-input v-model="form.hatchProjectName" placeholder="点击选择孵化项目" @click="hatch.visible = true" :disabled="form.status>1"  />
          </a-form-model-item>
        </a-col>
         <a-col :span="8">
          <a-form-model-item
            ref="projectBuildLabel"
            prop="projectBuildLabel"
            label="项目标签"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-input v-model="form.projectBuildLabel"
              @blur="
                () => {
                  $refs.projectBuildLabel.onFieldBlur()
                }
              "
              placeholder="请输入项目标签"
            />
          </a-form-model-item>
        </a-col>

      </a-row>
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-model-item
            ref="tradeName"
            label="商标名称"
            prop="tradeName"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-input v-model="form.tradeName"
              @blur="
                () => {
                  $refs.tradeName.onFieldBlur()
                }
              "
              placeholder="请输入商标名称"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item
            label="商标标签"
            ref="trademarkLabel"
            prop="trademarkLabel"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 15 }"
          >         
            <a-select
              v-model="form.trademarkLabel"
              placeholder="商标标签"
              :options="trademarkLabelOptions"
               @change="trademarkLabelChange"
            >
              <a-icon slot="suffixIcon" type="plus" />
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item
            label="商标类型"
            ref="trademarkType"
            prop="trademarkType"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-select
              v-model="form.trademarkType"
              placeholder="商标类型"
              :options="trademarkTypeOptions"
              @change="trademarkTypeChange"
            >
              <a-icon slot="suffixIcon" type="plus" />
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        
        <a-col :span="8">
          <a-form-model-item
            label="商标价值"
            ref="trademarkValue"
            prop="trademarkValue"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-select
              v-model="form.trademarkValue"
              placeholder="商标价值"
              :options="trademarkValueOptions"
              @change="trademarkValueChange"
              notFoundContent="请先选择商标类型"
            >
              <a-icon slot="suffixIcon" type="plus" />
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-model-item
            ref="interClass"
            label="国际分类"
            prop="interClass"
            :label-col="{ span: 3 }"
            :wrapper-col="{ span: 20 }"
          >
            <a-textarea
              v-model="form.interClass"
              @blur="
                () => {
                  $refs.interClass.onFieldBlur()
                }
              "
              :auto-size="{ minRows: 3, maxRows: 5 }"
              style="width: 100%"
              placeholder="请输入国际分类（100个字符以内）"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-model-item
            ref="similitudeGroup"
            label="类似群"
            prop="similitudeGroup"
            :label-col="{ span: 3 }"
            :wrapper-col="{ span: 20 }"
          >
            <a-textarea
              v-model="form.similitudeGroup"
              @blur="
                () => {
                  $refs.similitudeGroup.onFieldBlur()
                }
              "
              :auto-size="{ minRows: 3, maxRows: 5 }"
              style="width: 100%"
              placeholder="请输入类似群（100个字符内）"
            />
          </a-form-model-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-model-item
            ref="productService"
            label="商品/服务"
            prop="productService"
            :label-col="{ span: 3 }"
            :wrapper-col="{ span: 20 }"
          >
            <a-textarea
              v-model="form.productService"
              @blur="
                () => {
                  $refs.productService.onFieldBlur()
                }
              "
              :auto-size="{ minRows: 3, maxRows: 5 }"
              style="width: 100%"
              placeholder="请输入商品/服务（250个字符内）"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="11">
          <a-form-model-item
            label="申请人名称"
            ref="factory"
            prop="factory"
            :label-col="{ span: 6 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-select v-model="form.factory" placeholder="请选择申请人名称" :options="factoryOptions" @change="factoryChange">
              <a-icon slot="suffixIcon" type="plus" />
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item
            label="代理/办理机构"
            ref="projectBuildAgencyId"
            prop="projectBuildAgencyId"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-select
              v-model="form.projectBuildAgencyId"
              placeholder="代理/办理机构"
              :options="projectBuildAgencyIdOptions"
              @change="projectBuildAgencyIdChange"
            >
              <a-icon slot="suffixIcon" type="plus" />
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>

      <five-to-five ref="fiveForm" :projectBuildId="projectBuildId" :change-id="changeId" @addField="addFiveDataToForm"/>
    </a-form-model>

    <pagination-select
      :title="hatch.title"
      :searchPlaceholder="hatch.searchPlaceholder"
      :visible="hatch.visible"
      :url="hatch.url"
      :columns="hatch.columns"
      @hatchHandleOk="hatchHandleOk"
    />
  </div>
</template>
<script>
import $ from 'jquery'
import { getAction, getActionAsync, postAction, postActionAsync } from '@/api/manage'
import { getParamValFromUrl, strNotNull } from '@/utils/common.js'
import Vue from 'vue'
import SubTypeQuestions from '../../SubTypeQuestions.vue'
export default {
  components: {
    PaginationSelect: () => import('@/components/tools/PaginationSelect'),
    SubTypeQuestions: () => import('@/components/tools/SubTypeQuestions'),
    FiveToFive: () => import('@/components/tools/projectBuildStup/baseInfo/FiveToFive')
  },
  props: {
    projectBuildId: {
      Type: String,
      default: '',
    },
    changeId: {
      Type: String,
      default: '',
    }
  },
  data() {
    return {
      labelCol: { span: 8 },
      wrapperCol: { span: 15 },
      other: '',
      form: {
        id: '',
        projectClass: '70',
        projectNo: '',
        projectName: '',
        projectTypeSubCategory: '',
        hatchProjectId: '',
        hatchProjectNo: '',
        hatchProjectName: '',
        projectBuildLabel: '',
        tradeName: '',
        interClass: '',
        similitudeGroup: '',
        productService: '',
        factory: '',
        factoryName: '',
        projectBuildAgencyId: '',
        projectBuildAgencyName: '',
        trademarkLabel: '',
        trademarkLabelName: '',
        trademarkType: '',
        trademarkTypeName: '',
        trademarkValue: '',
        trademarkValueName: '',
        status: 0 
      },
      factoryOptions: [],
      projectBuildAgencyIdOptions: [],
      trademarkLabelOptions: [],
      trademarkTypeOptions: [],
      trademarkValueOptions: [],
      projectCategoryOptions: [],
      rules: {
        projectName: [
          { required: true, pattern:new RegExp(/^(关于第[\u4e00-\u9fa5_a-zA-Z0-9]+类[\u4e00-\u9fa5_a-zA-Z0-9]+商标申请的项目)$/),message: '项目名称格式为“关于第**类**商标申请的项目', trigger: 'blur'},
          { min: 1, max: 50, message: '项目名不超过50个字符', trigger: 'blur' }
        ],
        projectTypeSubCategory: [{ required: true, message: '请选择项目分类', trigger: 'change' }],
        projectBuildLabel: [
          { required: true, message: '请输入有效的项目标签', trigger: 'blur' },
          { min: 1, max: 100, message: '项目标签不超过100个字符', trigger: 'blur' },
        ],
        tradeName: [
          { required: true, message: '请输入商标名称', trigger: 'blur' },
          { min: 1, max: 100, message: '商标名称不超过100个字符', trigger: 'blur' },
        ],
        interClass: [
          { required: true, message: '请输入国际分类', trigger: 'blur' },
          { min: 1, max: 100, message: '国际分类不超过100个字符', trigger: 'blur' },
        ],
        similitudeGroup: [
          { required: true, message: '请输入类似群', trigger: 'blur' },
          { min: 1, max: 100, message: '类似群不超过100个字符', trigger: 'blur' },
        ],
        productService: [
          { required: true, message: '请输入商品/服务', trigger: 'blur' },
          { min: 1, max: 100, message: '商品/服务不超过150个字符', trigger: 'blur' },
        ],
        factory: [{ required: true, message: '请选择申请人名称', trigger: 'change' }],
        trademarkLabel: [{ required: true, message: '请选择商标标签', trigger: 'change' }],
        trademarkType: [{ required: true, message: '请选择商标类型', trigger: 'change' }],
        trademarkValue: [{ required: true, message: '请选择商标价值', trigger: 'change' }]
      },
      url: {
        codeInfoList: '/manage/codeInfo/list',
        getProjectByNo: '/projectBuild/getProjectByNo',
        save: '/projectBuild/add',
        queryVOById: '/projectBuild/queryVOById',
        brandApplicantMain: '/knowledge/brandApplicantMain/list',
        brandLabel: '/knowledge/brandLabel/list'
      },
      hatch: {
        visible: false,
        title: '请选择孵化项目',
        searchPlaceholder: '输入代码或名称查询',
        url: '/hatchProject/listBySelect',
        columns: [
          {
            title: '孵化项目编号',
            dataIndex: 'hatchProjectNo',
            align: 'center',
          },
          {
            title: '孵化项目名称',
            dataIndex: 'hatchProjectName',
            align: 'center',
          },
        ],
      },
      subType: {
        visible: false,
      },
      loadFinish: false

    }
  },
  computed: {},
  methods: {
    addFiveDataToForm(val,valRef) {
      this.$set(this.form, valRef, val)
    },
    async doSubmit() {
      if(!this.loadFinish){
        layer.message.warning('请等待页面加载完毕')
        return {}  
      }
      var validR=false;
      try{
        validR = await this.$refs.ruleForm.validate();
        validR = await this.$refs.fiveForm.checkFiveWriteStatus()
      }catch(e){
        validR = false;
      }
      console.log('validR',validR);
      this.form.validResult = validR;
      let res=await this.doSave()
      this.projectBuildId=res;
      return {valid:validR,id:res};
    },
    async doSave() {
      let flag=null;
      var vm=this;
      this.form.changeId=this.changeId;
      await postActionAsync(this.url.save, this.form)
        .then((res) => {
          if (res.code == 200) {
            vm.form.id = res.result.id;
            vm.form.projectNo = res.result.projectNo;
            this.$message.success('保存成功')
            return flag=res.result.id;
          } else {
            this.$message.warning('保存数据出错:' + res.message)
          }
        })
        .catch((res) => {
          this.$message.warning('保存数据出错:' + res.message)
        })
        return flag;
    },
    resetForm() {
      this.$refs.ruleForm.resetFields()
    },
    //孵化项目选中
    hatchHandleOk(record) {
      if (record != null && record.length > 0) {
        this.form.hatchProjectId = record[0].id
        this.form.hatchProjectNo = record[0].hatchProjectNo
        this.form.hatchProjectName = record[0].hatchProjectName
      }
      this.hatch.visible = false
    },
    //项目类型选中
    subTypeHandleOk(subType) {
      this.subType.visible = false
      if (subType != null) {
        this.form.projectTypeSubCategory = subType
      }
    },
    //如果有id，则加载已填写信息
    initData() {
      if (this.projectBuildId != null && this.projectBuildId != '') {
        var vm = this
        getAction(this.url.queryVOById, { id: this.projectBuildId,changeId: this.changeId })
          .then((res) => {
            if (res.code == 200) {
              var result = res.result
              if (result != null) {
                this.form = result
                this.getTrademarkValue(this.form.trademarkType)
              } else {
                vm.$message.warning('初始化项目信息为空')
              }
              this.loadFinish=true
            } else {
              this.$message.warning('初始化项目信息失败:' + res.message)
            }
          })
          .catch((res) => {
            this.$message.warning('初始化项目信息失败:' + res.message)
          })
      }else{
        this.loadFinish=true
      }
    },
    trademarkLabelChange(value,option) {
      this.form.trademarkLabelName = option.componentOptions.children[0].text;
    },
    trademarkTypeChange(value,option) {
      this.form.trademarkTypeName = option.componentOptions.children[0].text;
      this.form.trademarkValue = ''
      this.form.trademarkValueName = ''
      this.getTrademarkValue(value)
    },
    getTrademarkValue(value) {
      getAction(this.url.codeInfoList, { type: '商标价值',parentid: value,pageSize:-1 })
        .then((res) => {
        if (res.code == 200) {
          var list = res.result
          if (list != null) {
            this.trademarkValueOptions = []
            list.records.map((item) => {
              this.trademarkValueOptions.push({ value: item.code, label: item.name })
            })
          }
        } else {
          this.$message.warning('查询商标价值失败:' + res.message)
        }
      })
      .catch((res) => {
        this.$message.warning('查询商标价值失败:' + res.message)
      })
    },
    trademarkValueChange(value,option) {
      this.form.trademarkValueName = option.componentOptions.children[0].text;
    },
    factoryChange(value,option) {
      this.form.factoryName = option.componentOptions.children[0].text;
    },
    projectBuildAgencyIdChange(value,option) {
      this.form.projectBuildAgencyName = option.componentOptions.children[0].text;
    },
    //初始化项目子类
    initProjectCategoryOptions() {
      var vm = this
      getAction(this.url.codeInfoList, { type: '项目子类', isdel: 0, parentid: vm.form.projectClass,pageSize:-1 })
        .then((res) => {
          if (res.code == 200) {
            var list = res.result
            if (list != null) {
              list.records.map((item) => {
                vm.projectCategoryOptions.push({ value: item.code, label: item.name })
              })
            }
          } else {
            this.$message.warning('查询项目子类失败:' + res.message)
          }
        })
        .catch((res) => {
          this.$message.warning('查询项目子类失败:' + res.message)
        })
    },
    initFactoryOptions() {
      var vm = this
      getAction(this.url.brandApplicantMain, { pageNo:0,pageSize:-1,isDel:0 })
        .then((res) => {
          if (res.code == 200) {
            var list = res.result
            if (list != null) {
              list.records.map((item) => {
                vm.factoryOptions.push({ value: item.id+"", label: item.name })
              })
            }
          } else {
            this.$message.warning('查询商标申请主体失败:' + res.message)
          }
        })
        .catch((res) => {
          this.$message.warning('查询商标申请主体失败:' + res.message)
        })

      getAction(this.url.brandLabel,{ pageNo:0,pageSize:-1,isDel:0 }).then( res=>{
        if (res.code == 200) {
          var list = res.result
          if (list != null) {
            list.records.map((item) => {
              vm.trademarkLabelOptions.push({ value: item.id+"", label: item.name })
            })
          }
        } else {
          this.$message.warning('查询商标标签失败:' + res.message)
        }
      })    
    },
    initProjectBuildAgencyId() {
      var vm = this
      getAction(this.url.codeInfoList, { type: '商标代理机构',isdel: 0,pageSize:-1 })
        .then((res) => {
          if (res.code == 200) {
            var list = res.result
            if (list != null) {
              list.records.map((item) => {
                vm.projectBuildAgencyIdOptions.push({ value: item.code, label: item.name })
              })
            }
          } else {
            this.$message.warning('查询商标代理机构失败:' + res.message)
          }
        })
        .catch((res) => {
          this.$message.warning('查询商标代理机构失败:' + res.message)
        })

        getAction(this.url.codeInfoList, { type: '商标类型',isdel: 0,pageSize:-1 })
        .then((res) => {
          if (res.code == 200) {
            var list = res.result
            if (list != null) {
              list.records.map((item) => {
                vm.trademarkTypeOptions.push({ value: item.code, label: item.name })
              })
            }
          } else {
            this.$message.warning('查询商标类型失败:' + res.message)
          }
        })
        .catch((res) => {
          this.$message.warning('查询商标类型失败:' + res.message)
        })
    },
  },
  mounted() {
    this.initFactoryOptions()
    this.initProjectBuildAgencyId()
    this.initProjectCategoryOptions()
    this.initData()
  },
}
</script>
<style lang="less" scoped>
/deep/ .ant-btn-primary {
  width: 85px;
  height: 30px;
  border-radius: 2px;
  background: #4095e4;
  margin-right: 10px;
}
/deep/ .default {
  width: 85px;
  height: 30px;
  border-radius: 2px;
}
.baseinfo {
  background-color: #fff;
  border: 1px solid #eaeaea;
  padding: 30px;
  .btn {
    display: flex;
    justify-content: center;
  }
}
</style>